<template>
	<div class="tags">
		<!--    伪选择框-->
		<div class="tags-box" :class="[selectType == true?'tags-box-border-choose':'tags-box-border']">
			<span class="tags-box-title" v-if="!tagsForm">优先级</span>
			<div class="tags-item" v-if="tagsForm">
				<div class="select-item-sign" :style="{backgroundColor:tagsForm.color}"></div>
				<span class="tags-item-title">{{ tagsForm.label }}</span>
				<i class="el-icon-close tags-item-icon" @click="delClick"></i>
			</div>
			<i class="tags-box-icon el-icon-arrow-down"
				:class="[selectType == false?'transformIconChoose':'transformIcon']"></i>
		</div>
		<el-select ref="tagsSelect" style="width: 100%" v-model="selectTitle" @visible-change="visibleChange"
			size="medium" placeholder="请选择">
			<template slot="empty">
				<div class="select">
					<div :class="[tagsIndex == index?'select-item-choose':'select-item']"
						v-for="(item,index) in options" @click.stop="groupClick(item,index)">
						<div style="display: flex;flex-direction: row;align-items: center">
							<div class="select-item-sign" :style="{backgroundColor:item.color}"></div>
							<span style="font-size: 12px;">{{ item.label }}</span>
						</div>
					</div>
				</div>
				<el-empty description="暂无数据" :image-size="40" v-if="options.length == 0"></el-empty>
			</template>
		</el-select>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				options: [{
				  value: '01',
				  label: '严重',
				  type: false,
				  color:'#ff5630'
				}, {
				  value: '02',
				  label: '主要',
				  type: false,
				  color:'#ff8118'
				},
				{
				  value: '04',
				  label: '次要',
				  type: false,
				  color:'#1a5eff'
				},
				{
				  value: '05',
				  label: '不重要',
				  type: false,
				  color:'#36b37e'
				},
				{
				  value: '00',
				  label: '无优先级',
				  type: false,
				  color:'#c1c7d0'
				}],
				selectTitle: '',
				selectType: false,
				tagsForm: null,
				checkboxloading: false,
				tagsIndex: -1
			}
		},
		methods: {
			groupClick(item, index) {
				this.tagsForm = item;
				var _this = this
				if (_this.tagsIndex == index) {
					_this.tagsForm = null
					_this.tagsIndex = -1
				} else {
					_this.tagsForm = item
					_this.tagsIndex = index
					_this.$refs.tagsSelect.blur()
				}
				this.$emit('selectPriority',this.tagsForm)
			},
			delClick() {
				this.tagsForm = null
				this.tagsIndex = -1
				this.$emit('selectPriority',this.tagsForm)
			},
			visibleChange(item) {
				var _this = this
				_this.selectType = item
			},
			emptyClick(){
				this.tagsForm = null
				this.tagsIndex = -1
			}
		}
	}
</script>

<style scoped>
	.select {
		max-height: 380px;
		overflow: auto;
	}

	.select-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		color: #333333;
		justify-content: space-between;
	}

	.select-item:hover {
		background-color: rgba(88, 96, 105, 0.06);
	}

	.select-item-choose {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		background-color: rgba(194, 214, 255, 0.22);
		color: #2c7ef8;
		justify-content: space-between;
	}

	.select-item-sign {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin-right: 5px;
	}


	.tags-item {
		padding: 3px 6px;
		background-color: #ecedf0;
		border-radius: 3px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 10px;
	}

	.tags-item-title {
		max-width: 66px;
		font-size: 12px;
		color: #606266;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 5px;
		font-weight: 500;
	}

	.tags-item-icon {
		font-size: 12px;
		color: #909aaa;
		margin-top: 1px;
		pointer-events: auto;
	}



	.tags {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e47777;
		border-radius: 4px;
		position: relative;
	}

	.tags-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		border-radius: 4px;
		pointer-events: none;
		background-color: #f5f6f8;
		padding-left: 10px;
		padding-right: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.tags-box-icon {
		color: #C0C4CC;
		font-size: 14px;
		transition: transform .3s;
		cursor: pointer;
		position: absolute;
		right: 10px;
	}

	.transformIcon {
		transform: rotateZ(-180deg);
	}

	.transformIconChoose {
		transform: rotateZ(0deg);
	}

	.tags-box-border {
		border: 1px solid #f5f6f8;
	}

	.tags-box-border-choose {
		border: 1px solid #1890ff;
	}

	.tags-box-title {
		color: #C0C4CC;
		font-size: 14px;
		font-weight: 500;
		display: block;
		margin-left: 4px;
	}

	/deep/.el-input--medium .el-input__inner {
		background-color: #f5f6f8;
		border-color: #F5F6F8;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/deep/.el-input--medium .el-input__inner:hover {
		background-color: #ecedf0;
	}

	/deep/.el-select {
		width: 100%;
	}
</style>
